<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Firebug Lite</title>
<style>
/* *************************************************************************************************
 Global styles 
************************************************************************************************* */

html, body {
    font-family: Lucida Grande,Tahoma,sans-serif;
    font-size: 11px;
    
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* *************************************************************************************************
 Flexible Box
************************************************************************************************* */
/*
.vbox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    
    display: box;
    box-orient: vertical;
    box-align: stretch;
}

.hbox {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}

.boxFlex, .boxFlex1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.boxFlex2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}
/**/

.boxScroll {
    overflow: auto;
    min-height: 1px; /* Firefox needs min-height and min-width to show scrollbars */
    min-width: 1px;
    height: 100%; /* IE6 needs height and width properties */
    width: 100%;
}


/* *************************************************************************************************
 Flexible Box fixes
************************************************************************************************* */

.boxFix,
.boxFix .vbox,
.boxFix .hbox {
    position: relative;
}

.boxFix .boxFixPos {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}

.boxFixHideContents * {
    display: none;
}

/* *************************************************************************************************
 Flexible Box fixes for style translation
************************************************************************************************* */

.boxFix .boxFixRight {
    float: right;
    display: block;
    height: 100%;
    position: absolute;
}

.boxFix .boxFixFlex {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/**/

/* *************************************************************************************************
 Styling
************************************************************************************************* */

#main {
    width: 100%;
    height: 100%;
    visibility: hidden; /* avoid FOUC */
}

#top {
    background: #ccc;
    height: 30px;
    zmargin: 10px;
}

#tool {
    background: #ddd;
    height: 22px;
    zdisplay: none;
}

#splitter {
    width: 4px;
    background: #ddd;
}

#left {
    background: #ffe;
}

iframe {
    zposition: absolute;
    width: 100%;
    height: 100%;
}

#right {
    background: #efe;
    width: 300px;
    zdisplay: none;
}

#command {
    border-top: 1px solid #ddd;
}

#righttool {
    background: #eee;
    height: 22px;
}

#content {
}

</style>

<script type="text/javascript" src="../../test/measure.js"></script>
<script>
/**
 * OK: unify loops
 * OK: IE optimization (use margin trick) 
 * OK: problem with borders (Firebug Lite will use) 
 * OK: problem with padding/margin
 * TODO: remove margin support 
 * 
 *   
 * TODO: Change margin trick to top,left,bottom,right trick? 
 */  
window.onload = function()
{
    var timer;
    
    window.onresize = function()
    {
        /*
        if (!timer)
        {
            timer = setTimeout(function(){
            
                if (timer)
                {
                    clearTimeout(timer);
                    timer = null;
                }
                
                draw();
                
            }, 50);
        }
        /**/
        
        draw();
    }
    
    draw();
    
    // avoid FOUC
    $("main").style.visibility = "visible";
}

function draw()
{
    layout($("main"));
}

function layout(root)
{
    // TODO: better browser detection
    //if (!document.all) return;
    
    setClass(root, "boxFix");
    
    var objects =
        [
            {
                element: root,
                flex: null
            }
        ];
    
    var object;
    var result;
    
    while (object = objects.shift())
    {
        result = layoutBox(root, object);
        
        if (result.length > 0)
        {
            objects = objects.concat(result);
        }
    }
}

function layoutBox(root, boxObject)
{
    var win = window;
    var doc = document;
    var isIE6 = win.navigator.userAgent.indexOf("MSIE 6") != -1;
    
    var measure = new Measure(win);
    
    var result = [];
    
    var isVertical;
    var isHorizontal;
    
    var measureProperty;
    var dimensionProperty;
    
    var objects = [];
    var object;
    
    var element;
    var boxSpace;
    var space;
    var flex;
    var flexSum = 0;
    
    var totalSpace;
    var freeSpace;
    var fixedSpace = 0;
    var computedSpace = 0;
    var remainingPixels = 0;
    
    var flexRendered = false;
    
    var className;
    var reFlex = /\sboxFlex(\d?)\s/;
    var reBox = /\s(v|h)box\s/;
    var match;
    
    var box = boxObject.element;
    
    var isSafeToUseTranslation = true;
    
    var postFlexClassName;
    var preFlexMeasure;
    var postFlexMeasure;
    
    if (hasClass(box, "vbox"))
    {
        isVertical = true;
        
        measureProperty = "offsetHeight";
        dimensionProperty = "height";
    }
    else if (hasClass(box, "hbox"))
    {
        isHorizontal = true;
        
        measureProperty = "offsetWidth";
        dimensionProperty = "width";
    }
    else
    {
        return result;
    }

    if (isHorizontal)
    {
        preFlexMeasure = "left";
        postFlexMeasure = "right";
        postFlexClassName = "boxFixRight";
    }
    else
    {
        preFlexMeasure = "top";
        postFlexMeasure = "bottom";
        postFlexClassName = "boxFixPos";
    }

    for (var i = 0, childs = box.childNodes, length = childs.length; i < length; i++)
    {
        element = childs[i];
        
        // ignore non-element nodes
        if (element.nodeType != 1) continue;
        
        className = " " + element.className + " ";
        
        if (match = reFlex.exec(className))
        {
            flex = match[1]-0 || 1;
            space = null;
        
            flexSum += flex;
        }
        else
        {
            var padding = measure.getMeasureBox(element, "padding");
            var border = measure.getMeasureBox(element, "border");
            var margin = measure.getMeasureBox(element, "margin");
            
            var measureBeforeProperty = "top";
            var measureAfterProperty = "bottom";
            
            space = element[measureProperty] -
                    padding[measureBeforeProperty] - padding[measureAfterProperty] -
                    border[measureBeforeProperty] - border[measureAfterProperty];
            
            space = Math.max(space, 0);
            
            boxSpace = element[measureProperty] +
                    margin[measureBeforeProperty] + margin[measureAfterProperty];
                    /**/
            
            flex = null;
            
            fixedSpace += boxSpace;
        }
        
        object =
        {
            element: element,
            flex: flex,
            box: {}
        };
        
        object[dimensionProperty] = space;
        object.box[dimensionProperty] = boxSpace;
        
        objects.push(object);
        
        // it is a box, so we need to layout it
        if (reBox.test(className))
        {
            result.push(object);
        }
    }
    /*
    if (isIE6)
    {
        // TODO: move the window piece to outside this function
        totalSpace = box == root &&  // if we are adjusting the layout of the root and the root
            root.parentNode == doc.getElementsByTagName("body")[0] && // is a <body> child 
            root.currentStyle[measureProperty] == "100%" // with a 100% measure property
            ?
            getWindowSize(window)[measureProperty] // then we'll use the window measure 
            :
            boxObject[measureProperty] // otherwise look if we already computed the parent measure
            ?
            boxObject[measureProperty] // if so, use the parent box measure
            :
            null; // otherwise let it be calculated above like in other browsers
    }
    /**/
    
    if (!totalSpace)
    {
        var padding = measure.getMeasureBox(box, "padding");
        var border = measure.getMeasureBox(box, "border");
        
        var measureBeforeProperty = "top";
        var measureAfterProperty = "bottom";
        
        // IE6 will take into account the
        if (isIE6)
        {
            setClass(box, "boxFixHideContents");
        }
        
        totalSpace = box[measureProperty] -
                padding[measureBeforeProperty] - padding[measureAfterProperty] -
                border[measureBeforeProperty] - border[measureAfterProperty];
        
        if (isIE6)
        {
            removeClass(box, "boxFixHideContents");
        }
    }
    
    freeSpace = totalSpace - fixedSpace;
    
    for (var i = 0, length = objects.length; i < length; i++)
    {
        object = objects[i];
        
        element = object.element;
        flex = object.flex;
        
        //if (isVertical && !flex && !isSafeToUseTranslation) continue;
        
        if (flex)
        {
            space = Math.floor(freeSpace * flex / flexSum);
            space = Math.max(space, 0);
            
            // distribute remaining pixels
            remainingPixels = freeSpace * flex % flexSum;
            if (remainingPixels > 0 && computedSpace + space + remainingPixels <= totalSpace)
            {
                space++;
            }
            
            object[dimensionProperty] = space;
            flexRendered = true;
        }
        else
        {
            space = object[dimensionProperty];
        }

        
        if (isSafeToUseTranslation)
        {
        
        
//             if (isVertical)
//             {
//                 /*setClass(element, "boxFixFlex");
//                 element.style.height = space + "px";/**/
//                 
//                 setClass(element, "boxFixFlex");
//                 element.style.height = space  + "px"; 
//                 element.style.top = computedSpace + "px";                
//             }
//             else
//             {
//                 setClass(element, "boxFixFlex");
//                 element.style.width = space + "px"; 
//                 element.style.left = computedSpace + "px";                
//             }
            
                    
            if (flex)
            {
                setClass(element, "boxFixFlex");
            
                if (isHorizontal)
                {
                    /*
                    element.style.margin = "0 " + (totalSpace - computedSpace - space) + 
                                        "px  0 " + computedSpace + "px";
                                        /**/
                    element.style.right = totalSpace - computedSpace - space + "px"; 
                    element.style.left = computedSpace + "px";
                }
                else
                {
                    element.style.margin = computedSpace + "px 0 " + 
                                        (totalSpace - computedSpace - space) + "px 0";
                }
            }
            else if (flexRendered)
            {
                setClass(element, postFlexClassName);
                
                element.style[postFlexMeasure] = totalSpace - computedSpace - space + "px";
                element.style[dimensionProperty] = space + "px";
            }
            else
            {
                setClass(element, "boxFixPos");
                
                element.style[preFlexMeasure] = computedSpace + "px";
                element.style[dimensionProperty] = space + "px";
            }
        }
        else
        {
        
            if (isVertical)
            {
                element.style.height = space + "px";
            }
            else
            {
                setClass(element, "boxFixPos")
                
                element.style.left = computedSpace + "px";
                element.style.width = space + "px";
                
                // boxObject.height IE6 only
                if (isIE6)
                {
                    object.height = boxObject.height || box.offsetHeight;
                    element.style.height = object.height + "px";
                }
            }
            
        }
        
        //computedSpace += (object.box[dimensionProperty] || space);
        computedSpace += space;
    }
    
    return result;
}



function $(id)
{
    return document.getElementById(id);
}

function getWindowSize(win)
{
    var width=0, height=0, el;
    
    if (typeof win.innerWidth == "number")
    {
        width = win.innerWidth;
        height = win.innerHeight;
    }
    else if ((el=win.document.documentElement) && (el.clientHeight || el.clientWidth))
    {
        width = el.clientWidth;
        height = el.clientHeight;
    }
    else if ((el=win.document.body) && (el.clientHeight || el.clientWidth))
    {
        width = el.clientWidth;
        height = el.clientHeight;
    }
    
    return {width: width, height: height};
}

var hasClass = function(node, name)
{
    return (' '+node.className+' ').indexOf(' '+name+' ') != -1;
};

var setClass = function(node, name)
{
    if (node && (' '+node.className+' ').indexOf(' '+name+' ') == -1)
        node.className += " " + name;
};

var removeClass = function(node, name)
{
    if (node && node.className)
    {
        var index = node.className.indexOf(name);
        if (index >= 0)
        {
            var size = name.length;
            node.className = node.className.substr(0,index-1) + node.className.substr(index+size);
        }
    }
};

/*
// from jquery
var makeArray = function(array, results) {
	array = Array.prototype.slice.call( array, 0 );

	if ( results ) {
		results.push.apply( results, array );
		return results;
	}
	
	return array;
};

// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
	Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch(e){
	makeArray = function(array, results) {
		var ret = results || [];

		if ( toString.call(array) === "[object Array]" ) {
			Array.prototype.push.apply( ret, array );
		} else {
			if ( typeof array.length === "number" ) {
				for ( var i = 0, l = array.length; i < l; i++ ) {
					ret.push( array[i] );
				}
			} else {
				for ( var i = 0; array[i]; i++ ) {
					ret.push( array[i] );
				}
			}
		}

		return ret;
	};
}
/**/

</script>
</head>
<body>

    <div id="main" class="vbox">
        <div id="top">
            top
        </div>
        <div id="tool">
            tools
        </div>
        <div id="content" class="hbox boxFlex">
        
            <div id="left" class="boxFlex">
                left (I'm a div)
                <!--
                <iframe src="panel.html" frameborder=0 style="display:block"></iframe>
                -->
            </div>
            <div id="splitter">
            </div>
            <div id="right" class="vbox">
                <div class="boxFlex boxScroll">
                
                    <div style="padding: 20px;">
                    
                    right (I'm a div)
                    
<p style="white-space:nowrap;">--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------end</p>
<p>Lorem ipsum dolor sit amet consectetuer dui lacinia vitae malesuada libero. Sem ac ligula Aenean quis senectus fermentum Proin dolor leo Vestibulum. Urna Cum lobortis interdum et Phasellus justo orci justo gravida urna. Urna vestibulum vitae Curabitur vel auctor venenatis sapien Nam velit eu. Aliquam leo nibh sem ut Mauris sem convallis laoreet rutrum malesuada. Cursus Curabitur consequat vitae.</p>
<p>Nam quis lacus pretium et ipsum vel Aenean nonummy tempor egestas. Pellentesque mauris et non tempus leo Sed dui ligula vitae lacus. Maecenas In et nec ac hendrerit vitae velit a justo Ut. Pulvinar Ut adipiscing sodales senectus Vivamus Aliquam lacus mus sem eu. Pellentesque orci Lorem tortor eget Aenean justo pellentesque porta hendrerit vitae. Et ipsum tellus felis urna non Aenean.</p>
<p>In mauris nibh mollis metus id Quisque in Sed orci sapien. Tellus pharetra tellus a Aliquam montes pellentesque orci fames sed sem. Magna tempor ut cursus porttitor dolor Nam tellus consequat ante gravida. Ipsum eu ac pellentesque nulla Curabitur quis platea id facilisi lorem. Id quam justo sagittis iaculis tristique elit Nulla hac elit tincidunt. At et pretium Nullam gravida metus habitasse pellentesque dolor tristique ornare. Enim nibh ut.</p>
<p>In tristique Aenean venenatis nonummy eleifend Vivamus Aenean interdum cursus commodo. Pede natoque a felis Duis congue consectetuer est Vestibulum at Donec. Hendrerit orci consequat et pretium sagittis a mattis sed cursus Suspendisse. Auctor vitae nibh semper magna Phasellus et augue dictum tempor nibh. Tellus et semper vel faucibus ligula pede auctor vitae Sed sit. Lacus penatibus Integer eget.</p>
<p>Sed condimentum malesuada Nulla elit orci urna montes porta lacinia volutpat. Et ante fringilla in venenatis dui porttitor ipsum porttitor ullamcorper Curabitur. Ut adipiscing augue vitae auctor tempus id ac congue id condimentum. Congue gravida ipsum auctor nec Nam orci vitae malesuada parturient cursus. Pretium pede wisi congue nibh tellus.</p>
<p>Lorem adipiscing Fusce eu laoreet eros dis Maecenas ut hac Integer. Tristique nisl et Ut a diam et ligula Praesent tincidunt commodo. Et faucibus et orci parturient dictumst Vivamus lacus mollis Vestibulum commodo. Nulla ligula mi et eget pellentesque tincidunt elit tellus nibh dictumst. Ipsum consectetuer Morbi Quisque Nulla neque nec rhoncus mauris Suspendisse elit. Dui sapien.</p>
<p>Vivamus id sodales nibh molestie amet leo ut Nulla Fusce ultrices. Pellentesque pretium ac ut pellentesque non Sed tellus leo et semper. Pellentesque et tortor et metus hendrerit at gravida nunc at vel. Tortor mauris consequat Nulla lorem convallis enim Sed orci ligula sem. Tellus cursus gravida consectetuer quis platea Vestibulum leo wisi Proin adipiscing. Curabitur rutrum orci malesuada ut ut ante Vivamus orci leo.</p>
<p>Platea urna sed Sed Maecenas habitasse condimentum elit turpis justo In. Dis gravida magna libero vel amet cursus condimentum orci tellus lorem. Felis nec lacinia Nullam semper laoreet semper Nulla tortor ipsum Morbi. Facilisis quis adipiscing Nam turpis montes et nunc semper interdum elit. Vitae vel a nunc pede lobortis ligula a Nulla et Vestibulum. Ut lacus semper consequat laoreet.</p>
<p>Lorem egestas dictumst interdum tempus est dapibus felis Ut tellus suscipit. Fermentum congue Pellentesque felis amet convallis adipiscing Lorem nisl tincidunt sagittis. Nulla et massa ac et Vestibulum tellus Vivamus fringilla sodales laoreet. Id quis senectus dapibus enim elit Quisque Integer pharetra congue urna. Quis lacus tincidunt lacus mus metus sapien enim porttitor metus.</p>
<p>Nam tristique enim nonummy convallis risus ut quis felis wisi congue. Porttitor semper Aliquam id Nullam at vitae leo Suspendisse Vestibulum tristique. Fames turpis Nulla metus sit lacus ligula eu Lorem laoreet amet. Vestibulum condimentum In sem wisi In auctor Vestibulum cursus tincidunt tempus. Phasellus Suspendisse vitae sollicitudin Morbi dolor orci Quisque.</p>
<p>Amet tellus enim hac Nulla elit Vestibulum mollis aliquet dictum odio. Nulla Donec elit Nullam ut vitae velit semper Nulla nibh tempor. Condimentum iaculis ullamcorper rhoncus orci nonummy Morbi tellus ac scelerisque dignissim. Nulla sed cursus et ac Aliquam Donec Phasellus Lorem quis consequat. Pellentesque justo enim interdum consequat amet orci a et tempus quis. Ut Vestibulum neque faucibus montes Suspendisse ullamcorper adipiscing a accumsan eu. </p>
<p>Pellentesque molestie urna In id Nam magnis adipiscing et Curabitur fringilla. Risus leo Sed Fusce interdum Vestibulum semper id sit pellentesque justo. Et mollis orci porta consequat Donec Pellentesque Nam quis tincidunt in. Lacinia ornare metus est et amet accumsan vitae tincidunt malesuada tellus. Sit vitae lacus iaculis lacinia Nulla velit ac non lorem elit. Phasellus.</p>
<p>Id eros porta velit Vestibulum consequat risus tortor quam scelerisque lacus. At nibh ut tristique ipsum sapien Curabitur ut dui eget iaculis. Quis non at at justo commodo diam auctor Quisque congue rutrum. Ipsum tellus sagittis ac Donec et Aenean faucibus Cras Morbi interdum. Risus Quisque nec pede nulla et lobortis ac Duis Donec vitae. Tortor et est sagittis malesuada natoque ipsum nisl leo wisi mauris. Et Nunc diam.</p>
<p>Adipiscing ac euismod metus sed Aenean ultrices orci Morbi semper semper. Non convallis consectetuer convallis pede eget quis ligula porttitor ipsum velit. Quisque Proin ut felis justo interdum Maecenas dui Curabitur libero dignissim. Quis massa Proin pede vitae Fusce Phasellus cursus faucibus Vestibulum sit. Phasellus nonummy eros pretium faucibus in mauris et interdum senectus hendrerit. Sem semper Vestibulum consequat massa dolor Nullam nisl interdum Pellentesque ac. Non.</p>
<p>Gravida lacus Mauris nec laoreet orci justo quis eu gravida Curabitur. Quis tincidunt lacus et Pellentesque laoreet Integer eget dis sem Pellentesque. Laoreet et sapien Aenean quis consequat velit congue Aenean ipsum Nunc. Id nunc tincidunt accumsan Curabitur faucibus quis rhoncus lorem suscipit felis. Suspendisse Sed eget ligula tempus eu dui porttitor eu purus Maecenas. Mauris hendrerit tortor id ipsum nec congue rutrum libero tincidunt hac. Nec egestas laoreet.</p>
<p>Quis In hac tristique eros elit pretium a sem Nulla eu. Nunc Sed eget ante quam et In volutpat diam malesuada tellus. Ante In tempor Nam congue Suspendisse pretium quis orci risus mus. Eget lacus semper elit sed elit Ut cursus lobortis dictumst id. Id dictum non felis Nulla vitae semper est in fringilla faucibus. Urna.</p>
<p>Interdum aliquet aliquet ut id mollis sed hendrerit urna tellus Nam. Eros Sed ridiculus adipiscing dui Morbi ante gravida ut eu et. Est Sed ipsum nunc eros aliquam gravida Vivamus lacus Curabitur aliquet. Risus consequat faucibus fermentum lorem lorem hendrerit Vestibulum cursus metus et. Eu eleifend cursus faucibus nunc justo adipiscing Nam eu parturient adipiscing. Non lacinia Nam et pharetra volutpat interdum.</p>
<p>At Curabitur Nulla Nulla tellus elit elit semper mattis Sed natoque. Lorem lobortis Phasellus eros Lorem Quisque montes pretium Curabitur leo mauris. Ridiculus ut Nam pede orci quis ante urna sollicitudin nunc mi. Pretium quis In id velit urna augue libero lacus Integer magna. Egestas vitae porttitor et Aenean congue augue Curabitur et Pellentesque Donec. Laoreet tempor Aenean euismod leo fames ac.</p>
<p>Non turpis Lorem et sapien elit neque netus lacinia euismod scelerisque. Metus tincidunt In Quisque laoreet Donec sit ante pretium Pellentesque consequat. Ut consequat Vivamus euismod sociis accumsan Aliquam convallis nibh tellus vel. Metus consequat orci Aenean Aliquam Phasellus eleifend tristique Morbi Curabitur et. Magna urna gravida platea tristique augue interdum congue dolor a Cum. Consectetuer velit lacus.</p>
<p>Risus nulla euismod Nulla quis amet elit elit malesuada nulla ut. Cursus Ut a ut ipsum ac condimentum Donec eget Lorem justo. Sit adipiscing convallis hendrerit adipiscing risus Nullam fringilla cursus congue elit. Lorem Aenean lorem senectus vitae dui ridiculus nunc enim faucibus tempor. Ut hendrerit nibh eget velit dignissim metus metus dolor fringilla mattis. Laoreet cursus Vivamus consectetuer nulla.</p>


                    </div>
                </div>
            </div>
            
        </div>
        <div id="command">
            cmd
        </div>
    </div>
    
</body>
</html>